<template>
	<view class="px-4 py-2 d-flex bg-white">

		<view class="flex-1 d-flex j-center a-center border border-theme border-right-0 tab seckilling" 
			:class="selectedTab === TabEnum.SECKILLING ? 'text-white bg-theme' : 'font-theme-color bg-white'" 
			@tap="selectedTab = TabEnum.SECKILLING">
			秒杀中
		</view>
		<view class="flex-1 d-flex j-center a-center border border-theme tab seckillwill" 
			:class="selectedTab === TabEnum.SECKILLWILL ? 'text-white bg-theme' : 'font-theme-color bg-white'" 
			@tap="selectedTab = TabEnum.SECKILLWILL">
			即将秒杀
		</view>
	</view>
	<view v-if="selectedTab === TabEnum.SECKILLING">
		<SeckillCard @tap="toDetail(item.id)" v-for="(item,index) in goods_list" :key="item.id" :goods="item" :type="TabEnum.SECKILLING" />

	</view>
	<view v-else>
		<SeckillCard v-for="item in goods_list" :key="item.id" :goods="item" :type="TabEnum.SECKILLWILL" />
	</view>


</template>

<script setup>
import { ref } from 'vue'
import SeckillCard from '@/pages/index/components/seckill-card.vue'
import { TabEnum } from '@/pages/index/types'

const selectedTab = ref(TabEnum.SECKILLING)

const goods_list = ref([
    {
        id: 1,
        title: 'ZHIOAE86 专业rc遥控器死去漂移赛高速经济特技汽车,男孩生日礼物 玩具,经典灰色[秋名山AE86]',
        seckill_price: 1499,
        tags:['分期付款','白条'],
        origin_price: 1999,
        comment: 100,
        photo: '/static/product/ae86.jpg',
    },
    {
        id: 2,
        title: '老干妈贵州茅台酒',
        seckill_price: 1899,
        tags:['分期付款'],
        origin_price: 3299,
        comment: 100,
        photo: '/static/product/goods1.jpg',
    },
])
const toDetail = (id) => {
    uni.navigateTo({
        url: '/pages/goods/goods?id=' + id,
    })
}


</script>

<style scoped lang="scss">
	.tab {
		height: 60rpx;
	}
	$borderRadius: 10rpx;
	.seckilling {
		border-radius: $borderRadius 0 0 $borderRadius;
	}
	.seckillwill {
		border-radius: 0 $borderRadius $borderRadius 0;
	}



</style>
